<template>
	<div>
		<div class="kp-order" :class="[orderList.length==0?'kp-order-bg':'',$route.meta.xheader?'padtab':'']" v-if="isLogInFlag">
			<div class="kp-neir">
				<v-refresh :on-refresh="onRefresh">
				<v-reload :on-infinite-load="onInfiniteLoad" :parent-pull-up-state="infiniteLoadData.pullUpState" :isLoad="infiniteLoadData.isLoad">
					<!--火车票-->
					<div class="train_a">
						<div class="train_content" v-for="item,key in orderList" @click="cheakOrderTrain(item)">
							<div>
								<div class="train_left">
									<div class="train_pic">
										<img src="http://h5.kpcx179.com/wximages/train/huoche-@2x.png" alt="" v-if="item.show" />
										<img src="http://h5.kpcx179.com/wximages/train/huoche-huise.png" alt="" v-else/>
									</div>
									<div class="train_left_content">
										<div class="font_spill train_station">
											<span>{{item.subInfo.fromStation}}-{{item.subInfo.toStation}}</span>
											<span v-if="item.presellFlag" class="train_presell">（预约抢票）</span>
											<span v-else-if="item.orderType == 7" class="train_rob">（抢票单）</span>
										</div>
										<div class="font_spill">
											{{item.subInfo.departure}}至{{item.subInfo.arrival}}
										</div>
										<div class="font_spill">
											{{item.subInfo.trainNo}}
										</div>
									</div>
								</div>
								<div class="train_right">
									<div class="train_content_price">
										<span>￥</span>
										<span class="train_price_num">{{item.payMoney}}</span>
									</div>
									<div class="train_os">
										{{item.os}}
									</div>
									<div class="train_message">
										<div v-if="item.again" class="train_btn" @click.stop="trainAgain(item)">再次预订</div>
										<div v-if="item.del" class="train_btn" @click.stop="trainDel(item,index)">删除</div>
										<div v-if="item.pay" class="train_btn" @click.stop="trainPay(item)">去支付</div>
										<div v-if="item.qiang">抢票中...</div>
										<div v-if="item.zhan">占座中</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</v-reload>
				</v-refresh>
			</div>
			<div v-if="!Number(orderList.length)" class="order_nullOrder">
				<img src="../../../assets/nullOrder.png" alt="" />
			</div>
		</div>
		<div v-else class="order_noLogin">
			<div>
				<div class="order_noLogin_icon">
					<img src="../../../assets/noLogin@2x.png" alt="" />
				</div>
				<div class="order_login" @click="login">
					登录
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex';
	import DropDownRefresh from '@/components/DropDownRefresh';
	import PullUpReload from '@/components/PullUpReload';
	export default {
		components: {
			'v-refresh': DropDownRefresh,
			'v-reload': PullUpReload
		},
		data() {
			return {
				arrs: [],
				orderList: [],
				pages: 1,
				pageNum: 1,
				// 上拉加载的设置
				infiniteLoadData: {
					pullUpState: 0, // 子组件的pullUpState状态
					showPullUpListLength: this.initialShowNum, // 上拉加载后所展示的个数
					isLoad: false
				},
				isLogInFlag: false,
				isorder: '',
				orderquery: "",
			};
		},

		mounted() {
			document.body.scrollTop = 1;
			document.documentElement.scrollTop = 1;
			this.isLogInFlag = Boolean(this.$store.state.common.userinfo.userID);
			this.onItemClick();
		},
		methods: {
			backgo() {
				this.$router.go(-1);
			},
			getQuery() {
				this.orderquery = this.$route.query.order;
			},
			login() {
				this.$router.push({
					name: 'login',
				});
			},
			onRefresh(done) {
				// 下拉刷新
				// 如果下拉刷新和上拉加载同时使用，下拉时初始化上拉的数据
				this.orderList = [];
				this.ajaxList('tctrain/train/myOrdersList');
				done(); // call done
			},
			onInfiniteLoad(done) {
				// 上拉加载
				console.log(1);
				if(this.infiniteLoadData.pullUpState === 0) {
					this.pageNum = this.pageNum + 1;
					this.ajaxList('tctrain/train/myOrdersList', this.pageNum);
				}
				done();
			},
			onItemClick() {
				this.orderList = [];
				this.infiniteLoadData.pullUpState = 0;
				this.$store.commit('MY_TABFLAG', 0);
				this.ajaxList('tctrain/train/myOrdersList');
			},
			ajaxList(url, pages = 1) {
				var params = {
					type: '0',
					pageNum: pages,
					showNum: '10',
					userID: this.userinfo.userID
				};
				this.$http.post(this.$baseUrl.baseurl + url, params).then(res => {
					if(res.data.Code == 0) {
						var myOrdersList = res.data.Result.myOrdersList;
						myOrdersList.forEach((item, index) => {
							item.os = this.filterOrderStatus(item);
							item.subInfo.arrival = item.subInfo.arrivalTime.substring(5, 16);
							item.subInfo.departure = item.subInfo.departureTime.substring(5, 16);
							item.presellFlag = (item.orderNum.indexOf("YHCQ") != -1); //是否为预约抢票单
							this.orderList.push(item);
						}, this);
					} else {}
				}).catch(err => {
					console.log(err);
				});
			},
			filterOrderStatus(val) { //3是普通 7是抢票  zhan占座中  pay去支付
				val.show = false; //图片是否高亮
				if(val.refundStatus == 0) { //未退款
					if(val.cancelStatus == 0) { //未取消
						if(val.orderStatus == 0) { //待支付 //处理出票中的单子
							(val.subInfo.orderStateCode == "N" && val.orderType == 3) ? (val.zhan = true) : (val.pay = true);
							val.show = true;
							return "待支付"
						} else if(val.orderStatus == 1) {
							val.show = true;
							//处理火车票抢票单排队中的情况
							if(val.orderType == 7 && val.subInfo.orderStateCode == "D") { //抢票单
								val.qiang = true;
							} else {
								val.again = true; //再次预定按钮出现
								var nowTime = (new Date()).getTime();
								var endTime = new Date(val.subInfo.DptDateTime).getTime();
								val.del = (nowTime - endTime) > 0 ? true : false; //删除按钮
							};
							return "已支付"
						} else if(val.orderStatus == 2) {
							val.show = true;
							return "订单处理中"
						};
					} else if(val.cancelStatus == 1) {
						val.show = true;
						val.again = true; //再次预定按钮出现
						return "取消中"
					} else if(val.cancelStatus == 2) {
						val.again = true; //再次预定按钮出现
						val.del = true; //删除按钮
						return "已取消"
					};
				} else if(val.refundStatus == 1) {
					return "退款中"
				} else if(val.refundStatus == 2) {
					val.again = true; //再次预定按钮出现
					val.del = true; //删除按钮
					var str = "已退款";
					(val.subInfo.orderStateCode == "G") && (str = "已改签");
					return str
				} else if(val.refundStatus == 3) {
					return "退款失败"
				};
			},
			cheakOrderTrain(item) { //查看火车票
				var obj = {
					query: {
						orderNum: item.orderNum
					},
				};
				if(item.os == "待支付" && item.zhan) { //占座中...的车票
					obj.name = "trainOccupyingSeat";
				} else if(item.os == "待支付") { //支付页
					obj = this.trainPay(item, obj);
				} else if(item.os == "已支付" && item.qiang) { //抢票页面
					obj.name = "trainRobFinish";
				} else { //订单详情页
					obj.name = "trainOrderDetail";
					obj.query.orderType = item.orderType; //订单类型
				};
				this.$router.push(obj); //页面跳转
			},
			trainPay(item, obj) { //支付  //判断改签(平改还是差价)还是普通
				var flag = Boolean(obj);
				obj || (obj = { //跳支付
					query: {
						orderNum: item.orderNum
					},
				});
				obj.name = "trainPay";
				obj.query.orderType = item.orderType; //订单类型
				obj.query.changedType = item.subInfo.isChangedOrder ? 1 : 0; //是否为改签
				flag || this.$router.push(obj); //页面跳转
				return obj;
			},
			trainAgain(item) { //再次预定
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				trainStore.departureDate = new Date().format("yyyy-MM-dd");
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.push({
					name: 'trainList',
					query: {
						fromCity: item.subInfo.fromStation,
						toCity: item.subInfo.toStation,
						departureDate: new Date().format("yyyy-MM-dd"),
						Highspeed: false,
					},
				});
			},
			trainDel(item, index) { //删除
				this.$confirm('确认删除此订单吗', {
					title: '提示',
					yes: {},
					no: {},
				}).then(() => {
					var param = {
						"orderNum": item.orderNum,
					};
					this.$http.post(this.$baseUrl.baseurl + "tctrain/train/delMyOrder", param).then((res) => {
						this.$loading.hide();
						if(res.data.Code == "0") {
							this.$toast(res.data.msg, {
								durtaion: 200,
								location: 'center',
							});
							this.orderList.splice(index, 1);
						} else {
							this.$toast(res.data.msg, {
								durtaion: 200,
								location: 'center',
							});
						};
					}).catch((err) => {
						this.$loading.hide();
						console.log(err);
					});
				}).catch(() => {});
			},
		},
		created() {
			//创建后
			this.getQuery();
		},
		watch: {
			"$route": "getQuery",
		},
		computed: {
			...mapGetters(['my_tabflag', 'userinfo'])
		}
	};
</script>

<style scoped>
	
	.kp-header {
		height: 86px;
		padding: 0;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 999;
	}
	
	.kp-header .left-arrow {
		width: 25px;
		height: 44px;
		background: url(../../../assets/left-4.png) no-repeat center center;
		background-size: 25px 44px;
		top: 25px;
		left: 30px;
		position: absolute;
	}
	
	.orderHeader {
		height: 86px;
		width: 100%;
		background: #fff;
	}
	
	.orderSpan {
		display: inline-block;
		width: 25px;
		height: 44px;
		background: url(../../../assets/left-2.png) no-repeat center center;
		background-size: 25px 44px;
		position: absolute;
		top: 25px;
		left: 30px;
	}
	
	.orderDiv {
		width: 100%;
		height: 86px;
		text-align: center;
		line-height: 86px;
		color: #333;
		font-size: 34px;
	}
	
	.kp-header .kp-header-title {
		font-size: 34px;
		height: 86px;
		line-height: 86px;
	}
	
	.order {
		background: rgb(59, 195, 194);
	}
	
	.kp-order {
		/*padding-top: 106px;*/
		padding-bottom: 98px;
		background: #F4F5F9;
		font-family: 'MicrosoftYaHei';
	}
	
	.active-class {
		border: 0;
	}
	
	.tab_item {
		font-size: 32px !important;
		height: 88px !important;
		line-height: 88px !important;
	}
	
	.tab_nav {
		height: 88px;
	}
	
	.kp-tab .kp-tab-item.kp-tab-selected {
		color: rgb(59, 195, 194);
		border-bottom: 3px solid rgb(59, 195, 194);
	}
	
	.kp-tab .kp-tab-item {
		display: block;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		width: 100%;
		height: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), color-stop(#e5e5e5), to(rgba(229, 229, 229, 0))) bottom left no-repeat;
		background: linear-gradient(180deg, #e5e5e5, #e5e5e5, rgba(229, 229, 229, 0)) bottom left no-repeat;
		background-size: 100% 1px;
		font-size: 14px;
		text-align: center;
		line-height: 44px;
		color: #666;
	}
	
	.kp-tab-container {
		position: fixed;
		top: 0;
		z-index: 99;
		height: 88px;
		width: 100%;
		/*padding-top: 106px;*/
		background: #F4F5F9;
	}
	
	.padtab {
		padding-top: 96px;
		padding-bottom: 0;
	}
	
	.kp-tab-container>.kp-tab {
		/*padding-top: 106px;*/
		height: 88px;
		width: 100%;
		background: #fff;
		display: flex;
	}
	
	.kp-tab-wrap {
		padding-top: 88px;
	}
	
	.kp-neir {
		background: #F4F5F9;
		padding-bottom: 20px;
	}
	
	.train_item {
		height: 168px;
		margin: 16px 18px 0 18px;
		padding: 16px 20px;
		border: 4px;
		background: #fff;
		color: rgb(138, 138, 138);
	}
	
	.train_itemleft {
		/* padding-left: 56px; */
		/* background: url(../../../assets/train-h.png) no-repeat left top;
		background-size: 40px 40px; */
		float: left;
		width: 60%;
	}
	
	.train_item .scenicbg-inco {
		background: url(../../../assets/jingqu-@2x.png) no-repeat left top;
		background-size: 40px 40px;
	}
	
	.scenicbg {
		padding-left: 56px;
		background: url(../../../assets/jingqu-huise@2x.png) no-repeat left top;
		background-size: 40px 40px;
		float: left;
		width: 60%;
	}
	
	.leftimg {
		width: 41px;
		height: 40px;
		float: left;
		margin-right: 20px;
	}
	
	.leftimg>img {
		width: 100%;
		height: 100%;
	}
	
	.train_top {
		display: inline-block;
		width: 100%;
	}
	
	.train_icon {
		vertical-align: middle;
		display: inline-block;
		line-height: 1;
		font-size: 32px;
	}
	
	.train-time {
		margin: 19px 0 26px 0;
		font-size: 24px;
	}
	
	.train_timeem {
		margin: 0 5px;
	}
	
	.train_classes {
		font-size: 24px;
	}
	
	.train_itemright {}
	
	.train_price {
		margin: 4px 0 0 0;
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}
	
	.train_p {
		font-size: 29px;
		color: rgb(239, 30, 69);
	}
	
	.train_y {
		font-size: 21px;
	}
	
	.paid {
		font-size: 20px;
		margin-top: 10px;
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}
	
	.fail_p {
		color: rgb(59, 195, 194);
		margin-top: 48px;
		font-size: 24px;
	}
	
	.fail_btn {
		margin-top: 25px;
	}
	
	.fail_btn>a {
		display: inline-block;
		color: rgb(59, 195, 194);
		border: 2px solid rgb(148, 148, 148);
		border-radius: 4px;
		font-size: 22px;
	}
	
	.btn_again {
		padding: 11px 4px 10px 4px;
	}
	
	.train_itemright {
		float: right;
	}
	
	.btn_del {
		padding: 11px 7px 10px 8px;
		margin-left: 13px;
	}
	
	.btn_cancel {
		padding: 11px 8px 10px 8px;
		margin-left: 13px;
	}
	
	.btn_remark {
		padding: 11px 3px 10px;
		margin-left: 12px;
	}
	
	.btn_tk {
		padding: 11px 7px 10px;
		margin-left: 13px;
	}
	
	.wait {
		color: rgb(239, 30, 69);
		font-size: 24px;
		margin-top: 76px;
	}

	
	.black {
		color: rgb(68, 68, 68);
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	
	.orgne {
		color: rgb(243, 123, 7);
	}
	
	.gray {
		color: rgb(138, 138, 138);
	}
	
	.train_q {
		color: rgb(85, 170, 222);
		font-size: 28px;
	}
	
	.order_nullOrder {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	
	.order_nullOrder>img {
		width: 352px;
		height: 461px;
		margin-top: 200px;
	}

	
	.train_a {
		padding-top: 18px;
		background: #F4F5F9;
	}
	
	.train_content {
		padding: 0 21px 10px;
		height: 200px;
		/*box-sizing: border-box;*/
	}
	
	.train_content>div {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 18px;
		background-color: #ffffff;
		border-radius: 4px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.train_content>div>div {
		height: 100%;
		display: flex;
	}
	
	.train_left {
		justify-content: flex-start;
		width: 65%;
	}
	
	.train_left>.train_pic {
		width: 40px;
		height: 40px;
		margin-right: 16px;
	}
	
	.train_left>.train_pic>img {
		width: 100%;
		height: 100%;
	}
	
	.train_left_content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 24px;
		color: #8a8a8a;
		width: 85%;
	}
	
	.train_right {
		flex-direction: column;
		justify-content: space-between;
	}
	
	.train_right>div {
		display: flex;
		justify-content: flex-end;
	}
	
	.train_station {
		font-size: 30px;
		color: #8a8a8a;
	}
	
	.train_presell {
		color: #D64461;
		font-size: 28px;
	}
	
	.train_rob {
		color: #55aade;
		font-size: 28px;
	}
	
	.train_btn {
		padding: 14px 9px;
		border-radius: 4px;
		border: solid 2px #949494;
		font-size: 22px;
		color: #3bc3c2;
		margin-right: 13px;
	}
	
	.train_btn:last-child {
		margin-right: 0;
	}
	
	.train_content_price {
		font-size: 22px;
		color: #ef1e45;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}
	
	.train_price_num {
		font-size: 30px;
	}
	
	.train_os {
		font-size: 22px;
		color: #8a8a8a;
	}
	
	.train_message {
		color: #ef1e45;
		font-size: 24px;
	}
	
	
	.order_noLogin {
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.order_noLogin>div {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 244px;
	}
	
	.order_noLogin_icon {
		width: 222px;
		height: 272px;
		margin-bottom: 29px;
	}
	
	.order_noLogin_icon>img {
		width: 100%;
		height: 100%;
	}
	
	.order_login {
		width: 244px;
		height: 80px;
		background-color: #61cdc5;
		border-radius: 12px;
		font-size: 34px;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>